<template>
	<view class="zh-splash">
		<!-- <view class="pass" @click="experience">
			<text class="pass-text">跳过</text>
		</view> -->
		<swiper
			class="splash-swiper"
			:style="swiperStyle"
			:indicator-dots="swiperData.indicatorDots" 
			:indicator-active-color="swiperData.indicatorActiveColor"
			:autoplay="swiperData.autoplay" 
			:interval="swiperData.interval"
			:duration="swiperData.duration"
			@change="change"
		>
			<swiper-item>
				<view class="swiper-item">
					<image :src="IMG_URL + '/splash/splash_4.png'" class="splash-img"/>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image :src="IMG_URL + '/splash/splash_5.png'" class="splash-img"/>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image :src="IMG_URL + '/splash/splash_6.png'" class="splash-img"/>
				</view>
			</swiper-item>
			<swiper-item></swiper-item>
		</swiper>
		<view class="bottom" :style="bottomStyle">
			<view class="swiper-dots display-flex align-center" v-if="showDots">
				<view class="item flex">
					<view class="item-text" :class="{'active':active === 0}"></view>
				</view>
				<view class="item flex text-center">
					<view class="item-text" style="margin:0 auto" :class="{'active':active === 1}"></view>
				</view>
				<view class="item flex">
					<view class="item-text pull-right" :class="{'active':active === 2}"></view>
				</view>
			</view>
			<button class="experience" :style="bottomStyle" @click="experience" v-else>立即开启</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { storage } from '@/utils'
	import { IMG_URL } from '@/utils/constant'
	
	const systemInfo = uni.getSystemInfoSync()
	const screenHeight = systemInfo.screenHeight
	const screenWidth = systemInfo.screenWidth
	const height = screenHeight/screenWidth * 750
	
	let swiperStyle = {}
	let bottomStyle = {}
	if(height > 994 + 78 + 190 + 141 + 60) {
		swiperStyle = {
			'padding-top': uni.upx2px(190) + 'px'
		}
		bottomStyle = {
			'margin-top':uni.upx2px(141) + 'px'
		}
	} else {
		swiperStyle = {
			'padding-top': uni.upx2px(50) + 'px'
		}
		bottomStyle = {
			'margin-top':uni.upx2px(25) + 'px'
		}
	}
	
	
	const active = ref(0)
	const showDots = ref(true)
	const swiperData = reactive({
		indicatorDots: false,
		indicatorActiveColor:'#1769FF',
		autoplay: false,
		interval: 2000,
		duration: 500,
	})
	
	const change = (e:any) => {
		active.value = e.detail.current
		if(e.detail.current === 2) {
			showDots.value = false
		} else if(e.detail.current === 3) {
			showDots.value = false
			experience()
		} else {
			showDots.value = true
		}
	}
	
	const switchTab = (url:string) => {
		uni.switchTab({
			url:url
		})
	}
	
	const experience = () => {
		storage.setLocalStorage('first_flag',true)
		switchTab('/pages/index/index')
	}
	
	
</script>

<style lang="scss" scoped>
	.zh-splash {
		background-color: $uni-bg-card-color;
		position: fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		.pass {
			position:fixed;
			right:49rpx;
			margin-top:var(--status-bar-height);
			top:48rpx;
			width:103rpx;
			height:44rpx;
			font-size:28rpx;
			color:#333333;
			background-color: #f0f0f0;
			border-radius: 8rpx;
			text-align: center;
			display:flex;
			justify-content:center;
			align-items: center;
			z-index:10;
		}
		.splash-swiper {
			width:100%;
			height: 994rpx;
			//padding-top:190rpx;
			.swiper-item {
				width:100%;
				height: 994rpx;
				text-align: center;
				.splash-img {
					width: 750rpx;
					height: 994rpx;
				}
				
			}
			
		}
		.bottom {
			position:relative;
			.swiper-dots {
				position:absolute;
				left:50%;
				top:36rpx;
				transform: translateX(-50%);
				.item {
					width:32rpx;
					height:14rpx;
					.item-text {
						background-color: #E9E9E9;
						width:14rpx;
						height:14rpx;
						border-radius: 8rpx;
						&.active {
							width:32rpx;
							height:14rpx;
							border-radius: 8rpx;
							background-color: #51B2F6;
						}
					}
					
				}
			}
			.experience {
				width: 287rpx;
				height: 78rpx;
				line-height: 78rpx;
				background: linear-gradient(90deg, #3679EA, #52A2EB);
				box-shadow: -2px 7px 11px 0px rgba(144,204,255,0.36);
				border-radius: 39rpx;
				text-align:center;
				color:#fff;
				font-size:30rpx;
				//margin-top:141rpx;
			}
		}
		
	}
</style>
